<script setup>
    import { use } from 'echarts/core'
    import { LineChart } from 'echarts/charts'
    import { GridComponent } from 'echarts/components'
    import { CanvasRenderer } from 'echarts/renderers'
    use([GridComponent, LineChart, CanvasRenderer])

    import { ref } from 'vue'
    import VChart from 'vue-echarts'

    const option = ref({
    xAxis: {
        type: 'category',
        data: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24'],
        lineStyle: {
            color: 'white' 
        }  
    },
    yAxis: {
        type: 'value',
        lineStyle: {
            color: 'black' 
        }  
    },
    series: [
        {
        data: [158, 37, 20, 35, 530, 749, 496, 869, 809, 522, 605, 622],
        type: 'line',
        smooth: true,
        lineStyle: {
            color: 'blue' 
        }   
        }
    ]
    });
</script>

<template>
    <div class="Download_statistic_charts">
        <h2>近一月下载情况</h2>
        <v-chart class="chart" :option="option"></v-chart>
    </div>
</template>

<style scoped>
/* .Download_statistic_charts {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 20%;
    margin-right: 0.5%;
} */

/* .Download_statistic_charts h2{
    border-radius: 10px 10px 0 0;
    width: 100%;
    margin: 0px;
} */

.chart{
    /* display: flex; */
    /* flex-wrap: wrap; */
    height: 40vh;
    width: 100%;
    background-color: rgb(245, 248, 250);
    border-radius: 10px;
    margin-bottom: 8%;
}
</style>
